<template>
  <div class="userlist">
    <p class="title">成员列表(COOL)</p>
    <div class="search">
      <el-row style="text-align: left; margin-bottom: 10px">
        <el-button>刷新</el-button>
        <el-button type="primary">新增</el-button>
        <el-button type="danger" disabled>删除</el-button>
        <el-button type="success" disabled>转移</el-button>
      </el-row>
      <div class="searchbtn">
        <el-form
          :inline="true"
          :model="newuserlist"
          class="demo-form-inline"
          ref="searchform"
        >
          <el-form-item prop="roleName">
            <el-input
              v-model="newuserlist.roleName"
              placeholder="请输入关键字"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="getUserList()" style="height: 40px"
          >搜索</el-button
        >
      </div>
    </div>
    <el-table :data="userlist" border style="width: 100%" class="table">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column fixed label="头像" width="100">
        <template slot-scope="scope">
          <img :src="'./img/' + scope.row.headImg + '.jpg'" width="90%" />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="nickName" label="昵称"></el-table-column>
      <el-table-column prop="departmentName" label="部门名称"></el-table-column>
      <el-table-column
        prop="roleName"
        label="角色"
        width="120"
        class="tag-group"
      >
        <template slot-scope="scope">
          <el-tag effect="dark" type="primary">
            {{ scope.row.roleName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="toEdit(scope)"
            type="text"
            size="medium"
          >
            编辑
          </el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index, userlist)"
            type="text"
            size="medium"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[20, 40, 60, 100]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </div>

    <el-dialog title="修改昵称" :visible.sync="noteVisible" width="50%">
      <textarea cols="30" rows="10" v-model="tempNote"></textarea><br />
      <el-button @click="noteVisible = false">取消</el-button>
      <el-button @click="sureEdit">确定</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  methods: {
    handleSizeChange(val) {
      this.pagination.size = val;
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
    },
    getUserList() {
      console.log("userlist");
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    toEdit(scope) {
      //确定编辑的行
      this.editRow = { ...scope.row };
      //显示编辑框
      this.noteVisible = true;
      //当前临时被编辑的文本
      this.tempNote = scope.row.note;
      //被编辑的行
      this.editIndex = scope.$next;
      // console.log("scope.$next",scope)
    },
    sureEdit() {
      alert("修改成功");
      this.noteVisible = false;
    },
  },
  data() {
    return {
      noteVisible: false,
      // formVisible:false,
      userlist: [
        {
          createTime: "2021-02-26 14:29:52",
          departmentId: "11",
          departmentName: "开发",
          email: null,
          headImg: 1,
          id: 28,
          name: "神仙都没用",
          nickName: "神仙都没用",
          phone: null,
          remark: null,
          roleName: "系统管理员",
          status: 1,
          updateTime: "2021-02-26 14:29:52",
          username: "icssoa",
        },
        {
          createTime: "2021-02-26 14:29:23",
          departmentId: "13",
          departmentName: "游客",
          email: null,
          headImg: 2,
          id: 27,
          name: "小青",
          nickName: "小青",
          phone: null,
          remark: null,
          roleName: "游客",
          status: 1,
          updateTime: "2021-02-26 14:29:23",
          username: "xiaoqin",
        },
        {
          createTime: "2021-02-26 14:28:49",
          departmentId: "12",
          departmentName: "测试",
          email: null,
          headImg: 3,
          id: 26,
          name: "小绿",
          nickName: "小绿",
          phone: null,
          remark: null,
          roleName: "测试",
          status: 1,
          updateTime: "2021-02-26 14:28:49",
          username: "xiaolv",
        },
        {
          createTime: "2021-02-26 14:28:25",
          departmentId: "12",
          departmentName: "测试",
          email: null,
          headImg: 4,
          id: 25,
          name: "小黑",
          nickName: "小黑",
          phone: null,
          remark: null,
          roleName: "测试",
          status: 1,
          updateTime: "2021-02-26 14:28:25",
          username: "xiaohei",
        },
        {
          createTime: "2021-02-26 14:17:38",
          departmentId: "11",
          departmentName: "开发",
          email: null,
          headImg: 5,
          id: 24,
          name: "小白",
          nickName: "小白",
          phone: null,
          remark: null,
          roleName: "开发",
          status: 1,
          updateTime: "2021-02-26 14:17:38",
          username: "xiaobai",
        },
      ],
      pagination: {
        page: 1,
        size: 20,
        total: 5,
        currentPage: 1,
      },
      tempNote: "",
      newuserlist: {
        createTime: "",
        departmentId: "",
        departmentName: "",
        email: null,
        headImg: "",
        id: "",
        name: "",
        nickName: "",
        phone: null,
        remark: null,
        roleName: "",
        status: "",
        updateTime: "",
        username: "",
      },
    };
  },
};
</script>

<style>
.el-main {
  padding-top: 0;
}
.add,
.search {
  background-color: #fff;
}
</style>

<style scoped lang="scss">
.userlist {
  background-color: #fff;
  width: 100%;
  height: 100vh;
  text-align: center;
  padding: 30px;

  .title {
    font-size: 20px;
    margin: 20px auto;
  }

  .search {
    display: flex;
    justify-content: space-between;

    .searchbtn {
      display: flex;
      justify-content: space-between;
    }
  }

  .table {
    font-size: 18px;
  }
  .pagination {
    text-align: right;
    margin-top: 10px;
    font-size: 26px;
  }
}
</style>
